<template>
  <div class="genshin-character-book">
    
      <!-- 顶部导航模块 -->
      <div class="header-module">
          <h2 class="section-title">提瓦特图鉴</h2>
          <div class="nav-tabs">
              <a href="#" class="tab-item">新角色登场</a>
              <a href="#" class="tab-item">热门角色</a>
              <a href="#" class="tab-item">元素队伍</a>
          </div>
      </div>

      <!-- 新角色模块 -->
      <div class="new-characters-module">
          <h3 class="module-title">新角色登场 <span class="more" @click="navigateToMore('characters')">查看更多 ></span></h3>
          <div class="character-list">
              <div class="character-item" v-for="(item, index) in characterList" :key="index">
                  <img
                      :src="item.avatar"
                      alt="角色立绘"
                      class="character-avatar"
                      @click="viewCharacter(item.id)"
                  >
                  <div class="character-info">
                      <p class="character-name">{{ item.name }}</p>
                      <p class="element">{{ item.element }}·{{ item.region }}</p>
                  </div>
              </div>
          </div>
      </div>

      <!-- 热门角色模块 -->
      <div class="hot-chart-module">
          <h3 class="module-title">热门角色榜</h3>
          <div class="chart-list">
              <div class="chart-item" v-for="(item, index) in hotChartData" :key="index">
                  <span class="rank">{{ index + 1 }}.</span>
                  <div class="character-info">
                      <p class="character-name">{{ item.name }}</p>
                      <p class="element">{{ item.element }}·{{ item.rarity }}星</p>
                  </div>
              </div>
          </div>
      </div>

      <!-- 元素分类模块 -->
      <div class="element-category-module">
          <h3 class="module-title">元素属性分类</h3>
          <div class="element-tags">
              <span class="tag" v-for="tag in elementTags" :key="tag">
                  {{ tag }}
              </span>
          </div>
      </div>

      <!-- 队伍推荐模块 -->
      <div class="team-recommend-module">
          <h3 class="module-title">热门队伍搭配</h3>
          <div class="team-list">
              <div class="team-item" v-for="(item, index) in teamList" :key="index">
                  <img
                      :src="item.cover"
                      alt="队伍封面"
                      class="team-cover"
                      @click="viewTeam(item.id)"
                  >
                  <div class="team-info">
                      <p class="team-name">{{ item.name }}</p>
                      <p class="team-desc">{{ item.desc }}</p>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

// 新角色数据
const characterList = [
  { id: 1, avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.RqlOfv2SA81CBrXrklo2BAHaHa?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1', name: '纳西妲', element: '草', region: '须弥', rarity: '5', releaseDate: '2024-01-15' },
  { id: 2, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.exEzaURO4U0gqm1MO7IasAHaK2?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1', name: '芙宁娜', element: '水', region: '枫丹', rarity: '5', releaseDate: '2024-03-01' },
  { id: 3, avatar: 'https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20230712/14/30/f12793091ecc4d91793683533ad10843.png', name: '莱欧斯利', element: '冰', region: '枫丹', rarity: '5', releaseDate: '2024-04-10' },
  { id: 4, avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.qNZVhahHoYGTtdaLpgD4WwHaKd?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1', name: '卡维', element: '草', region: '须弥', rarity: '4', releaseDate: '2024-05-20' },
  { id: 5, avatar: 'https://i.bobopic.com/small/109625413.jpg', name: '琳妮特', element: '风', region: '枫丹', rarity: '4', releaseDate: '2024-06-05' },
  { id: 6, avatar: 'https://upload-bbs.mihoyo.com/upload/2021/04/17/11316600/4964cbe9743bddf535cfed0f8c3b9029_9106761612558172602.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png', name: '钟离', element: '岩', region: '璃月', rarity: '5', releaseDate: '2023-12-01' },
  { id: 7, avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.H8xhm7kM3h79Lud6IlZnTAHaHa?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1', name: '雷电将军', element: '雷', region: '稻妻', rarity: '5', releaseDate: '2023-11-15' },
  { id: 8, avatar: 'https://upload-bbs.mihoyo.com/upload/2022/10/06/287163444/77b8c2204eef712e616b471bd9029f76_7453479774267597183.jpg?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg', name: '温迪', element: '风', region: '蒙德', rarity: '5', releaseDate: '2023-10-01' }
];

// 热门角色榜单数据
const hotChartData = [
  { id: 1, name: '纳西妲', element: '草', rarity: '5' },
  { id: 2, name: '雷电将军', element: '雷', rarity: '5' },
  { id: 3, name: '钟离', element: '岩', rarity: '5' },
  { id: 4, name: '芙宁娜', element: '水', rarity: '5' },
  { id: 5, name: '温迪', element: '风', rarity: '5' }
];

// 元素分类数据
const elementTags = ['火', '水', '冰', '雷', '风', '岩', '草'];

// 队伍推荐数据
const teamList = [
  { id: 1, cover: 'https://upload-bbs.miyoushe.com/upload/2023/04/20/298673929/72262f962b6fc678c86b99be2463e117_3016684134342063200.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png', name: '绽放激化队', desc: '草神+水C+雷辅的元素反应队' },
  { id: 2, cover: 'https://n.sinaimg.cn/sinakd10114/199/w640h359/20220325/dc23-57d3ab315c0ec85892d2c886ba2533d1.jpg', name: '雷国队', desc: '雷电将军+班尼特+香菱的经典配队' },
  { id: 3, cover: 'https://upload-bbs.miyoushe.com/upload/2023/03/27/6274269/0df87aaa8252b6e0e923e5eb6b2fefdc_1400290466846125282.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg', name: '永冻队', desc: '神里绫华+莫娜的冰水环境队' },
  { id: 4, cover: 'https://upload-bbs.mihoyo.com/upload/2022/08/18/204137932/4bca632dfe0b5cd45fda44b5f2348b85_2082737567860162419.jpg?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,jpg', name: '纯色岩队', desc: '钟离+阿贝多的双岩共鸣队' }
];

const viewCharacter = (id) => { 
  console.log('查看角色详情', id);
  router.push({ name: 'characterDetail', query: { id } });
};

const viewTeam = (id) => { 
  console.log('查看队伍详情', id);
  router.push({ name: 'teamDetail', query: { id } });
};

const navigateToMore = (type) => {
  console.log(`查看更多${type}`);
  // 跳转逻辑
};
</script>

<style lang="scss" scoped>
.genshin-character-book {
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
  background: linear-gradient(to bottom, #f0f9ff, #e0f2fe);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(22, 93, 255, 0.15);

  .section-title {
      font-size: 24px;
      color: #165DFF;
      margin-bottom: 20px;
      border-bottom: 2px solid #E0F2FE;
      padding-bottom: 10px;
      position: relative;
      display: inline-block;

      &::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 80px;
          height: 2px;
          background: linear-gradient(90deg, #165DFF, #40C4FF);
      }
  }

  .nav-tabs {
      display: flex;
      gap: 15px;
      margin-bottom: 30px;

      .tab-item {
          color: #4096FF;
          padding: 8px 15px;
          border-radius: 20px;
          transition: all 0.3s;
          background: rgba(255, 255, 255, 0.7);
          box-shadow: 0 2px 10px rgba(22, 93, 255, 0.1);
          font-weight: 500;

          &:hover, &.active {
              color: white;
              background: linear-gradient(135deg, #165DFF, #40C4FF);
              box-shadow: 0 4px 15px rgba(22, 93, 255, 0.25);
          }
      }
  }

  .module-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      color: #333;
      margin: 30px 0 20px;
      position: relative;
      padding-left: 15px;
      font-weight: 600;

      &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 5px;
          height: 20px;
          background: linear-gradient(to bottom, #165DFF, #40C4FF);
          border-radius: 2px;
      }

      .more {
          color: #999;
          font-size: 14px;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 5px;
          font-weight: normal;

          &::after {
              content: '';
              width: 8px;
              height: 8px;
              border-right: 2px solid #999;
              border-bottom: 2px solid #999;
              transform: rotate(45deg);
              transition: all 0.3s;
          }

          &:hover {
              color: #165DFF;

              &::after {
                  border-color: #165DFF;
                  transform: rotate(225deg);
              }
          }
      }
  }

  .character-list, .team-list {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;

      .character-item, .team-item {
          width: calc(25% - 15px);
          min-width: 160px;
          cursor: pointer;
          background: white;
          border-radius: 12px;
          padding: 10px;
          box-shadow: 0 4px 15px rgba(22, 93, 255, 0.08);
          transition: all 0.3s;
          position: relative;
          overflow: hidden;

          &::before {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 4px;
              background: linear-gradient(90deg, #165DFF, #40C4FF);
              opacity: 0;
              transition: opacity 0.3s;
          }

          &:hover {
              transform: translateY(-5px);
              box-shadow: 0 8px 25px rgba(22, 93, 255, 0.15);
              &::before {
                  opacity: 1;
              }
          }

          .character-avatar, .team-cover {
              width: 100%;
              height: 180px;
              border-radius: 8px;
              object-fit: cover;
              transition: transform 0.3s;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

              &:hover {
                  transform: scale(1.03);
              }
          }

          .character-info, .team-info {
              padding: 10px 0 0;

              .character-name, .team-name {
                  font-size: 16px;
                  color: #333;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-weight: 600;
                  display: flex;
                  align-items: center;
                  gap: 5px;
              }

              .element, .team-desc {
                  font-size: 13px;
                  color: #666;
                  margin-top: 5px;
                  display: -webkit-box;
                  .character-name,
                  .team-desc {
                      font-size: 13px;
                      color: #666;
                      margin-top: 5px;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 1; /* 原有属性 */
                      line-clamp: 1; /* 标准属性 */
                      overflow: hidden;
                  }
                  -webkit-box-orient: vertical;
                  overflow: hidden;
              }

              .element {
                  color: #165DFF;
                  font-weight: 500;
              }
          }
      }
  }

  .hot-chart-module {
      position: relative;
      padding-left: 30px;
      margin-top: 20px;

      &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 3px;
          background: linear-gradient(to bottom, #165DFF, #40C4FF);
          border-radius: 3px;
      }

      .chart-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 12px 0;
          border-bottom: 1px dashed #E0F2FE;
          transition: all 0.3s;

          &:hover {
              transform: translateX(5px);
          }

          .rank {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              background: linear-gradient(135deg, #165DFF, #40C4FF);
              color: white;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 14px;
              box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
          }

          .character-name {
              font-size: 16px;
              color: #333;
              font-weight: 600;
          }

          .element {
              font-size: 13px;
              color: #666;
          }
      }
  }

  .element-category-module {
      margin-top: 10px;
  }

  .element-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 15px;

      .tag {
          padding: 6px 12px;
          border: 1px solid #E0F2FE;
          border-radius: 20px;
          font-size: 14px;
          color: #4096FF;
          transition: all 0.3s;
          background: white;
          box-shadow: 0 2px 8px rgba(22, 93, 255, 0.05);
          display: flex;
          align-items: center;
          gap: 5px;

          &:hover {
              border-color: #165DFF;
              color: white;
              background: linear-gradient(135deg, #165DFF, #40C4FF);
              box-shadow: 0 4px 12px rgba(22, 93, 255, 0.15);
          }
      }
  }
}
</style>